<template>
    <div class="parts-spec-panel-root">
        <div class="parts-spec-left-right-content-lay">
            <div class="parts-spec-left-content-lay">
                <div class="parts-spec-left-table-lay">
                    <PartsSpecTable :PltCode="this.PltCode" :dmgCode="this.dmgCode" :partsTableCaptions="this.partsTableCaptions" @onPartsSpecSelect="onPartsSpecSelect" @onChangedPartsSpecTableCount="onChangedPartsSpecTableCount" ref="PartsSpecTable" class="table-view"/>
                </div>
            </div>
            <div class="parts-spec-right-content-lay">
                <PartsSpecEditTab :partsItemLabelList="this.partsItemLabelList"
                    :PltCode="this.PltCode"
                    :dmgCode="this.dmgCode"
                    :selectPartsSpec= "selectPartsSpec"
                    :partsShapeNames= "partsShapeNames"
                    :damageFactorList= "damageFactorList"
                    :corrosionLoopNumbers= "corrosionLoopNumbers"
                    :partsSpecTableCount="partsSpecTableCount"
                    @onAddPartsSpec="onAddPartsSpec"
                    @onAddPartsSpecCancel="onAddPartsSpecCancel"
                    @onEditPartsSpecCancel="onEditPartsSpecCancel"
                    @onDeletePartsSpec="onDeletePartsSpec"
                    @onSavedPartsSpec="onSavedPartsSpec"
                    ref="PartsSpecEditTab"/>
            </div>
        </div>
    </div>
</template>

<script>
import { GetCaptions, GetDamageFactorsList, GetCorrosionLoopNumberList } from "@/api/api";
import eventBus from "@/eventBus/bus";
import PartsSpecTable from "@/components/Customize/Customer127/PartsSpec/views/PartsSpecTable";
import PartsSpecEditTab from "@/components/Customize/Customer127/PartsSpec/views/PartsSpecEditTab";
export default {
    props: ["PltCode", "dmgCode"],
	components: {
        PartsSpecTable,
        PartsSpecEditTab,
    },
	// ["userInfo"],
	// dataプロパティ：変更が検知されるような値
	data() {
		return {
            partsTableCaptions: [],
            partsItemLabelList: [],
			partsShapeNames: [],
            damageFactorList: [],
            corrosionLoopNumbers: [],
            selectPartsSpec: null,
            partsSpecTableCount: 0,
		}
	},

    watch: {
        async dmgCode() {
			await this.GetCaptions();
            this.GetDamageFactorsList();
            this.GetCorrosionLoopNumberList();
		},
	},

    methods: {
		GetCaptions() {
			GetCaptions().then((res) => {
				this.partsTableCaptions = res.data.data.partsTableCaptions;
				this.partsItemLabelList = res.data.data.partsItemLabelList;
                this.partsShapeNames = res.data.data.partsShapeNames;
			});
		},

        GetDamageFactorsList() {
			GetDamageFactorsList().then((res) => {
				this.damageFactorList = res.data.data.damageFactorList;
			});
		},

        GetCorrosionLoopNumberList() {
			let Dto = {
				dmgCode: this.dmgCode,
				pltCode: this.PltCode,
			}
			GetCorrosionLoopNumberList(Dto).then((res) => {
                this.corrosionLoopNumbers = res.data.data.corrosionLoopNumbers;
			});
		},

        onPartsSpecSelect(e) {
            let Fn = () => {
                this.selectPartsSpec = e;
            }
            this.isCurrentNextFn(Fn, e);
		},

        isCurrentNextFn(Fn, e) {
            this.$store.commit("changeIsCurrentFn", Fn);
            if (this.$store.state.isCurrentNext || !e) {
                Fn();
            } else {
                eventBus.$emit('EventBusPartsSpecSaveFn');///	部位仕様
            }
        },

        onAddPartsSpec() {
			this.$refs.PartsSpecTable.AddPartsSpec();
		},
        
        onChangedPartsSpecTableCount(e) {
            this.partsSpecTableCount = e;
        },

        onAddPartsSpecCancel() {
			this.$refs.PartsSpecTable.DeleteLastPartsSpecTable();
		},
        onEditPartsSpecCancel() {
			this.$refs.PartsSpecTable.setHoldRow();
		},
        onDeletePartsSpec() {
			this.$refs.PartsSpecTable.GetPartsSpecList();
		},
        async onSavedPartsSpec(isConfirmClick) {
			await this.$refs.PartsSpecTable.AfterSaveGetPartsSpecList(isConfirmClick);
		},
	},
    mounted() {
		this.GetCaptions();
        this.GetDamageFactorsList();
        this.GetCorrosionLoopNumberList();
	},
};
</script>

<style lang="scss" scoped>
.parts-spec-panel-root {
	width: 100%;
	height: calc(100% - 48px);// 48px = EvaluationViewのtitle-viewの高さ
}
.parts-spec-left-right-content-lay {
    width: 100%;
    height: 95%;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    gap: 15px;
}
.parts-spec-left-content-lay {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .parts-spec-left-table-lay {
        width: 100%;
        // height: 90%;
        flex-grow: 1;
        flex-shrink: 1;
        border: 1px solid #d3d3d3;

        .table-view {
            width: 100%;
            height: 100%;
        }
    }
}

.parts-spec-right-content-lay {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
}
</style>